<template>
    <div class="echarts">
        <div class="select">
            <b>选择省份：</b>
            <a-select v-model="pieContry" style="width: 200px"  @change="selectFun">
                <a-select-option v-for="item in area" :key="item.value" :value="item.value">
                    {{item.label}}
                </a-select-option>
            </a-select>
        </div>
        <div class="ech" style="width: 1250px;display: flex;justify-content:space-between;flex-wrap: wrap;margin: 0 auto;">
            <div id="main" style="height:600px;width:500px;"></div>
            <div id="mainT" style="height:500px;width:700px;"></div>
        </div>
    </div>
</template>
<script>
    import axios from "axios"
    import echarts from "echarts"

    export default {
        data() {
            return {
                area: [
                    {
                        value: '北京',
                        label: '北京'
                    },
                    {
                        value: '天津',
                        label: '天津'
                    },
                    {
                        value: '河北',
                        label: '河北'
                    },
                    {
                        value: '山西',
                        label: '山西'
                    },
                    {
                        value: '内蒙古',
                        label: '内蒙古'
                    },
                    {
                        value: '辽宁',
                        label: '辽宁'
                    },
                    {
                        value: '吉林',
                        label: '吉林'
                    },
                    {
                        value: '黑龙江',
                        label: '黑龙江'
                    },
                    {
                        value: '上海',
                        label: '上海'
                    },
                    {
                        value: '江苏',
                        label: '江苏'
                    },
                    {
                        value: '浙江',
                        label: '浙江'
                    },
                    {
                        value: '安徽',
                        label: '安徽'
                    },
                    {
                        value: '福建',
                        label: '福建'
                    },
                    {
                        value: '江西',
                        label: '江西'
                    },
                    {
                        value: '山东',
                        label: '山东'
                    },
                    {
                        value: '河南',
                        label: '河南'
                    },
                    {
                        value: '湖北',
                        label: '湖北'
                    },
                    {
                        value: '湖南',
                        label: '湖南'
                    },
                    {
                        value: '广东',
                        label: '广东'
                    },
                    {
                        value: '广西',
                        label: '广西'
                    },
                    {
                        value: '海南',
                        label: '海南'
                    },
                    {
                        value: '重庆',
                        label: '重庆'
                    },
                    {
                        value: '四川',
                        label: '四川'
                    },
                    {
                        value: '贵州',
                        label: '贵州'
                    },
                    {
                        value: '云南',
                        label: '云南'
                    },
                    {
                        value: '西藏',
                        label: '西藏'
                    },
                    {
                        value: '陕西',
                        label: '陕西'
                    },
                    {
                        value: '甘肃',
                        label: '甘肃'
                    },
                    {
                        value: '青海',
                        label: '广东'
                    }
                ],
                value: '',
                pieContry: "北京"
            };
        },
        mounted() {
            this.selectFun();
        },
        methods: {
            selectFun() {
                this.initChart();
                this.initChartT();
            },
            //饼状图
            initChart() {
                let myChart = echarts.init(document.getElementById('main'));
                let arr = []
                axios.get('https://api.inews.qq.com/newsqa/v1/query/pubished/daily/list?province=' + this.pieContry).then(res => {
                    let allData = res.data.data.slice(0, 20)
                    allData.forEach(item => {
                        arr.push({value: item.confirm_add, name: item.date})
                    })
                    let options = {
                        title: {
                            text: `新冠病毒每日新增情况（饼状图） ${this.pieContry}`,
                            subtext: '2020年1月27日~2020年2月15日',
                            left: 'center',
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{a} <br/>{c}人 ({d}%)'
                        },
                        toolbox: {
                            saveAsImage: {}
                        },
                        series: [
                            {
                                name: '相比昨日新增：',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '70%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                center: ['50%', '50%'],
                                data: arr.sort(function (a, b) {
                                    return a.value - b.value;
                                }),
                                roseType: 'radius',
                                animationType: 'scale',
                            }
                        ]
                    }
                    myChart.setOption(options)
                }).catch(err => {
                    console.log(err);
                })
            },
            /*条形图*/
            initChartT() {
                //时间轴
                let XAxis = []
                // 新增
                let YAxis = []
                //已确诊
                let confirmY = []
                //死亡
                let deadY = []
                //治愈
                let healY = []
                let chart = echarts.init(document.getElementById("mainT"));
                axios.get('https://api.inews.qq.com/newsqa/v1/query/pubished/daily/list?province=' + this.pieContry).then(res => {
                    let allData = res.data.data
                    console.log(allData);
                    allData.forEach(item => {
                        XAxis.push(item.date)
                        //新增
                        YAxis.push(item.confirm_add)
                        //确诊
                        confirmY.push(item.confirm)
                        //死亡
                        deadY.push(item.dead)
                        //治愈
                        healY.push(item.heal)
                    })
                    let nowTime = new Date()
                    let Year = nowTime.getFullYear();
                    let Mouth = nowTime.getMonth()+1;
                    let Day = nowTime.getDate();
                    let options = {
                        title: {
                            text: '新冠病毒每日新增情况（折线图）' + this.pieContry,
                            subtext: `2020年1月27日~${Year}年${Mouth}月${Day}日`,
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        legend: {
                            data: ["新增", "确诊", "死亡", "治愈"]
                        },
                        toolbox: {
                            feature: {
                                magicType: {
                                    show: true,
                                    type: ['bar', 'line']
                                },
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: XAxis
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '新增病例',
                                stack: '新增病例',
                                data: YAxis,
                                type: 'line'
                            },
                            {
                                name: '确诊病例',
                                stack: '确诊病例',
                                data: confirmY,
                                type: 'line'
                            },
                            {
                                name: '死亡病例',
                                stack: '死亡病例',
                                data: deadY,
                                type: 'line'
                            },
                            {
                                name: '治愈病例',
                                stack: '治愈病例',
                                data: healY,
                                type: 'line'
                            }
                        ]
                    };
                    chart.setOption(options)
                }).catch(err => {
                    console.log(err);
                })
            },
        }
    }
</script>
<style lang="less">
    .echarts {
        position: relative;
        .select{
            margin-bottom: 40px;
        }
    }

</style>